@section('content')
<div class="am-cf am-padding">
   <div class="am-fl am-cf">
      <strong class="am-text-primary am-text-lg">产品类别</strong>
   </div>
</div>
    <div class="am-g">
      <div class="am-u-md-6 am-cf">
        <div class="am-fl am-cf">
          <div class="am-btn-toolbar am-fl">
            <div class="am-btn-group am-btn-group-xs">
              <a class="am-btn am-btn-primary" href="{{URL::route('product.add.show')}}"><span class="am-icon-plus"></span> 新增</a>
            </div>
          </div>
        </div>
      </div>
      <div class="am-u-md-6">
      	<form class="am-form-inline" role="form" style="text-align: right;">
		  <div class="am-form-group">
		    <input type="text" name="name" class="am-form-field" placeholder="名称">
		  </div>
		  <div class="am-form-group">
		  	<select name="status" class="am-form-field">
		  		<option value="0">全部</option>
		  		<option value="1" {{$search['status'] == 1 ? 'selected' : ''}}>在线</option>
		  		<option value="2" {{$search['status'] == 2 ? 'selected' : ''}}>下线</option>
		  	</select>
		  </div>
		  <button type="submit" class="am-btn am-btn-default">查询</button>
		</form>
      </div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12">
          <table class="am-table am-table-striped am-table-hover table-main">
            <thead>
              <tr>
                <th>ID</th>
                <th>顺序</th>
                <th>图片</th>
                <th>中文名</th>
                <th>英文名</th>
                <th>数量</th>
                <th>价格</th>
                <th>折扣价格</th>
                <th>操作</th>
              </tr>
          </thead>
          <tbody>
          	@foreach ($products as $p)
            <tr data-id="{{$p->id}}"  data-name='{{$p->name}}'>
              <td>{{$p->id}}</td>
              <td class="m-product-sort">
              	<a class="swap am-btn am-btn-default am-btn-xs  am-icon-caret-up" data-type="up" data-am-loading="{loadingText: ''}">
              	</a>
              	<a class="swap am-icon-caret-down am-btn-xs am-btn am-btn-default" data-type="down" data-am-loading="{loadingText: ''}"></a>
              </td>
              <td><img src="{{Images::url($p->image,72,72)}}"></td>
              <td>{{$p->name}}</td>
              <td>{{$p->enname}}</td>
              <td class="quantity-value">{{$p->quantity}}</td>
              <td>{{$p->price}}</td>
              <td>{{$p->discount_price}}</td>
              <td>
                <div class="am-btn-toolbar">
                  <div class="am-btn-group am-btn-group-xs">
                  	<button class="am-btn am-btn-default am-btn-xs delete-product am-text-secondary"
                  		data-active="{{empty($p->deleted_at) ? true:false}}"
                    	data-am-loading="{loadingText: '执行中...'}">
                    	@if (empty($p->deleted_at))
						<span class="am-icon-toggle-on"></span> 下线
						@else
						  <span class="am-icon-toggle-off"></span> 上线
						@endif
                    </button>
                    <a class="am-btn am-btn-default am-btn-xs am-text-secondary" href="{{URL::route('product.update.show',$p->id)}}"><span class="am-icon-pencil-square-o"></span> 编辑</a>
                    <button class="am-btn am-btn-default am-btn-xs am-text-danger force-delete-product"
                    	data-am-loading="{loadingText: '删除中...'}"><span class="am-icon-trash-o"></span> 删除
                    </button>
                    <button class="quantity am-btn am-btn-default am-btn-xs am-text-secondary" data-am-loading="{loadingText: 'loading'}">库存
                    </button>
                  </div>
                </div>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
        <div class="am-cf">
		  <div class="am-fr">
		  	<!-- 分页列表 -->
		  	{{$products->appends($search)->links("admin.slider")}}
		  </div>
		</div>
      </div>
    </div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd"></div>
    <div class="am-modal-bd">确认删除吗？</div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="msg-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd"></div>
    <div class="am-modal-bd">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<!-- 添加颜色start -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="quantity-dialog">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">修改数量
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
      	<form class="am-form-horizontal am-form" id="quantity-form" method="post" action="{{URL::route('product.quantity.update')}}"
      		enctype="application/x-www-form-urlencoded">
      		  <div id="quantity-fields">
      		  </div>
      		   <p class="am-text-danger error-msg" id="quantity-error-msg">
			  </p>
		      <button id="quantity-update-btn" class="am-btn am-btn-primary am-btn-block submit-btn"  data-am-loading="{spinner: 'circle-o-notch', loadingText: '保存中...'}">保存</button>
		</form>
    </div>
  </div>
</div>
@stop


@section('script')
<script id="quantity-tpl" type="text/x-handlebars-template">
@{{#each fields}}
<div class="am-form-group">
	<label class="am-u-sm-6 am-form-label">@{{label}}</label>
	<div class="am-u-sm-6">
		<input type="text" name="@{{name}}" placeholder="" value="@{{value}}">
        <input type="hidden" name="@{{idName}}" placeholder="" value="@{{idValue}}">
	</div>
</div>
@{{/each}}
<input type="hidden" name="id" value="@{{id}}"/>
</script>
<style>
/**
 * 复写am-dimmer的透明动画，避免模态框的问题
 */
.am-dimmer{
	-webkit-transition: none;
	transition:none;
}
</style>
<script type="text/javascript">
$(function () {
	$('#delete-confirm,#msg-alert').on('closed.modal.amui', function() {
		  $(".am-dimmer").hide();
	});
	$(".delete-product").on("click",function(){
		var $btn = $(this);
		var $tr = $(this).closest("tr");
		$.post("{{URL::route('product.toggle')}}",$tr.data(),function(data){
	       	  $btn.button('reset');
	  		  if (data.success){
		  		 var active = $btn.data('active');
			  	 $btn.html(active ? "<span class='am-icon-toggle-off'></span>上线" : "<span class='am-icon-toggle-on'></span>下线");
				 $btn.data('active',!active);
	  		  } else {
		  		alert("错误");
			  }
		});
	});
	$(".swap").on("click",function(){
		var $btn = $(this);
		var $tr = $(this).closest("tr");
		var data = {"id1":$tr.data("id")};
		
		var type = $btn.data("type");
		var $tr2 = type == 'up' ? $tr.prev() : $tr.next();
		if ($tr2.length == 0){
			return;
		}
		data.id2 = $tr2.data("id");
		$btn.button("loading");
		$.post("{{URL::route('product.swap')}}",data,function(data){
	       	  $btn.button('reset');
	  		  if (data.success){
		  		 if (type == 'up'){
			  			$tr.after($tr2);
			  	 } else {
				  		$tr.before($tr2);
				 }
	  		  } else {
		  		alert("错误");
			  }
		});
	});
	$(".force-delete-product").on("click",function(){
		$btn = $(this);
		$tr = $(this).closest("tr");
		$('#delete-confirm').find(".am-modal-hd").text($tr.data().name);
		$('#delete-confirm').modal({
	        //relatedTarget: this,
	        onConfirm: function(options) {
	          //$('#delete-confirm').modal("close");
	          $btn.button("loading");
	          $.post("{{URL::route('product.delete')}}",$tr.data(),function(data){
	        	  $btn.button('reset');
		  		  if (data.success){
		  				$tr.remove();
		  		  } else {
			  			$('#msg-alert').find(".am-modal-bd").text(data.error);
			  			$('#msg-alert').modal();
				  }
		  	  });
	        },
	    });
	});
	
	//修改库存
	$(".quantity").on("click",function(e){
		var url = "{{URL::route('product.get')}}";
		var data = $(this).closest("tr").data();
		var $btn = $(this);
		$btn.button("loading");
		$.post(url,data,function(data){
			var fields = [];
			if (data.sizes.length == 0 && data.colors.length == 0){
				fields.push({
					label:data.name,
					name:"quantity",
					value:data.quantity,
					idName:"productId",
					idValue:data.id
				});
			} else {
				data.sizes.forEach(function(item,index){
					fields.push({
						label:item.size,
						name:"sizeQuantity[]",
						value:item.quantity,
						idName:"sizeId[]",
						idValue:item.id
					});
				});
				data.colors.forEach(function(item,index){
					fields.push({
						label:item.color,
						name:"colorQuantity",
						value:item.quantity,
						idName:"colorId",
						idValue:item.id
					});
				});
			}
			var template = Handlebars.compile($("#quantity-tpl").html());
			$("#quantity-fields").html("");
			$("#quantity-fields").append(template({"fields":fields,"id":data.id}));
			$('#quantity-dialog').modal();
			$btn.button("reset");
		});
	});

	$("#quantity-update-btn").on("click",function(){
		var $btn = $(this);
		$btn.button('loading');
		var options = {
	            success: function (data) {
	            	$btn.button('reset');
		            if (data.success){
		            	$('#quantity-dialog').modal('close');
		            	$("tr[data-id="+data.id+"]").find(".quantity-value").html(data.quantity);
		            } else {
						$("#quantity-error-msg").text('保存错误');
			        }
	            }
	    };
	    //直接提交
	    $("#quantity-form").ajaxSubmit(options);
		return false;
	});

});
</script>
@stop
